<template>
	<div>
		<div :style='{ "padding": "20px 20px 20px 15%", "margin": "10px auto 0", "borderRadius": "27px", "background": "url(http://codegen.caihongy.cn/20240120/d40775f482fb4eaa8a715212bf1ab10f.png)", "width": "80%", "backgroundSize": "100% 100%", "backgroundRepeat": "no-repeat" }'
			class="breadcrumb-preview">
			<el-breadcrumb :separator="'Ξ'" :style='{ "fontSize": "14px", "lineHeight": "1" }'>
				<el-breadcrumb-item class="item1" to="/"><a>首页</a></el-breadcrumb-item>
				<el-breadcrumb-item class="item2" v-for="(item, index) in breadcrumbItem" :key="index"
					to="/index/xueshengyundongxiangmu"><a>{{ item.name }}</a></el-breadcrumb-item>
				<el-breadcrumb-item class="item3"><a href="javascript:void(0);">详情</a></el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div
			:style='{ "padding": "20px 20px 20px 15%", "margin": "10px auto 0", "borderRadius": "27px", "background": "url(http://codegen.caihongy.cn/20240120/d40775f482fb4eaa8a715212bf1ab10f.png)", "width": "80%", "backgroundSize": "100% 100%", "backgroundRepeat": "no-repeat" }'>
			<el-button size="mini" @click="backClick">返回</el-button>
		</div>
		<div class="detail-preview"
			:style='{ "padding": "30px 22px", "margin": "10px auto", "flexWrap": "wrap", "background": "#fff", "display": "flex", "width": "60%", "position": "relative" }'>
			<div class="attr"
				:style='{ "minHeight": "75px", "padding": "0", "background": "none", "display": "flex", "width": "55%", "position": "relative", "order": "2" }'>

				<div class="info"
					:style='{ "padding": "10px", "margin": "0 0 0 0", "background": "#fff", "flex": "1" }'>
					<div class="item"
						:style='{ "padding": "10px", "margin": "0 0 10px 0", "alignItems": "center", "background": "none", "justifyContent": "space-between", "display": "flex" }'>
						<div :style='{ "color": "#000", "fontSize": "18px", "fontWeight": "bold" }'>
							{{ detail.yundongmingcheng }}
						</div>
						<div @click="storeup(1)" v-show="!isStoreup"
							:style='{ "borderRadius": "20px", "padding": "20px", "background": "#FE6917" }'><i
								v-if="true" :style='{ "color": "#fff", "fontSize": "14px" }'
								class="el-icon-star-off"></i><span
								:style='{ "color": "#fff", "fontSize": "14px" }'>点我收藏({{ detail.storeupnum }})</span>
						</div>
						<div @click="storeup(-1)" v-show="isStoreup"
							:style='{ "borderRadius": "20px", "padding": "20px", "background": "#FE6917" }'><i
								v-if="true" :style='{ "color": "#fff", "fontSize": "14px" }'
								class="el-icon-star-on"></i><span
								:style='{ "color": "#fff", "fontSize": "14px" }'>取消收藏({{ detail.storeupnum }})</span>
						</div>
					</div>
					<div class="item"
						:style='{ "padding": "10px", "margin": "0 0 10px 0", "background": "#fff", "justifyContent": "spaceBetween", "display": "flex" }'>
						<div class="lable"
							:style='{ "width": "102px", "padding": "0 10px", "fontSize": "14px", "lineHeight": "24px", "color": "#9e9e9e", "textAlign": "right" }'>
							比赛时间</div>
						<div
							:style='{ "padding": "0 10px", "fontSize": "14px", "lineHeight": "24px", "color": "#3B2626", "flex": "1" }'>
							{{ detail.bisaishijian }}</div>
					</div>
					<div class="item"
						:style='{ "padding": "10px", "margin": "0 0 10px 0", "background": "#fff", "justifyContent": "spaceBetween", "display": "flex" }'>
						<div class="lable"
							:style='{ "width": "102px", "padding": "0 10px", "fontSize": "14px", "lineHeight": "24px", "color": "#9e9e9e", "textAlign": "right" }'>
							参赛人数</div>
						<div
							:style='{ "padding": "0 10px", "fontSize": "14px", "lineHeight": "24px", "color": "#3B2626", "flex": "1" }'>
							{{ detail.cansairenshu }}</div>
					</div>
					<div class="item"
						:style='{ "padding": "10px", "margin": "0 0 10px 0", "background": "#fff", "justifyContent": "spaceBetween", "display": "flex" }'>
						<div class="lable"
							:style='{ "width": "102px", "padding": "0 10px", "fontSize": "14px", "lineHeight": "24px", "color": "#9e9e9e", "textAlign": "right" }'>
							参赛地点</div>
						<div
							:style='{ "padding": "0 10px", "fontSize": "14px", "lineHeight": "24px", "color": "#3B2626", "flex": "1" }'>
							{{ detail.cansaididian }}</div>
					</div>
					<div class="item"
						:style='{ "padding": "10px", "margin": "0 0 10px 0", "background": "#fff", "justifyContent": "spaceBetween", "display": "flex" }'>
						<div class="lable"
							:style='{ "width": "102px", "padding": "0 10px", "fontSize": "14px", "lineHeight": "24px", "color": "#9e9e9e", "textAlign": "right" }'>
							点击次数</div>
						<div
							:style='{ "padding": "0 10px", "fontSize": "14px", "lineHeight": "24px", "color": "#3B2626", "flex": "1" }'>
							{{ detail.clicknum }}</div>
					</div>
					<div class="btn" :style='{ "padding": "10px 0", "flexWrap": "wrap", "display": "flex" }'>
						<el-button
							:style='{ "border": "0", "cursor": "pointer", "padding": "0 10px", "margin": "0 auto 10px", "outline": "none", "color": "#fff", "borderRadius": "10px", "background": "#3554A4", "width": "40%", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
							v-if="btnAuth('xueshengyundongxiangmu', '修改')" @click="editClick">修改</el-button>
						<el-button
							:style='{ "border": "0", "cursor": "pointer", "padding": "0 10px", "margin": "0 auto 10px", "outline": "none", "color": "#000", "borderRadius": "10px", "background": "#FFC174", "width": "40%", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
							v-if="btnAuth('xueshengyundongxiangmu', '删除')" @click="delClick">删除</el-button>
						<!-- hasChat 无 -->
						<!-- crossOptButtonStatusColumns [1] -->
						<el-button v-show="!isBaoming" v-if="btnAuth('xueshengyundongxiangmu', '报名')"
							:style='{ "border": "0", "cursor": "pointer", "padding": "0 10px", "margin": "0 auto 10px", "outline": "none", "color": "#fff", "borderRadius": "10px", "background": "#FE6917", "width": "40%", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
							@click="onAcross('xueshengbaomingxinxi', '', '', '[1]', '已报名')"
							type="warning">报名</el-button>
						<el-button v-show="isBaoming"
							:style='{ "border": "0", "cursor": "pointer", "padding": "0 10px", "margin": "0 auto 10px", "outline": "none", "color": "#fff", "borderRadius": "10px", "background": "#FE6917", "width": "40%", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
							@click="deleteBaoming()">取消报名</el-button>

					</div>
				</div>
			</div>

			<el-carousel v-if="detailBanner.length"
				:style='{ "width": "45%", "padding": "0 0 55px", "margin": "0", "height": "755px", "order": "1" }'
				trigger="click" indicator-position="inside" arrow="always" type="default" direction="horizontal"
				height="700px" :autoplay="false" :interval="3000" :loop="true">
				<el-carousel-item :style='{ "borderRadius": "10px", "width": "100%", "height": "100%" }'
					v-for="item in detailBanner" :key="item.id">
					<img :style='{ "objectFit": "cover", "width": "100%", "height": "100%" }' :preview-src-list="[item]"
						v-if="item.substr(0, 4) == 'http'" :src="item" class="image">
					<img :style='{ "objectFit": "cover", "width": "100%", "height": "100%" }'
						:preview-src-list="[baseUrl + item]" v-else :src="baseUrl + item" class="image">
				</el-carousel-item>
			</el-carousel>

			<div class="zancai"
				:style='{ "padding": "0", "margin": "0", "top": "735px", "left": "18px", "background": "#fff", "display": "flex", "width": "44%", "position": "absolute", "zIndex": "9" }'>
				<div :style='{ "padding": "0", "margin": "0 2px", "alignItems": "center", "borderRadius": "8px", "background": "#FE6917", "display": "flex", "width": "100%", "justifyContent": "center", "height": "50px" }'
					v-if="!isThumbsupnum && !isCrazilynum" class="zan" @click="thumbsupOrCrazily(21)">
					<i :style='{ "color": "#fff", "margin": "0 5px 0 0", "fontSize": "16px" }'
						class="iconfont icon-dianzan"></i>
					<span :style='{ "color": "#fff", "margin": "0 3px", "fontSize": "16px" }'>赞一下({{ detail.thumbsupnum
					}})</span>
				</div>
				<div :style='{ "padding": "0", "margin": "0 2px", "alignItems": "center", "borderRadius": "8px", "background": "#FE6917", "display": "flex", "width": "100%", "justifyContent": "center", "height": "50px" }'
					v-if="!isThumbsupnum && !isCrazilynum" class="cai" @click="thumbsupOrCrazily(22)">
					<i :style='{ "color": "#fff", "margin": "0 5px 0 0", "fontSize": "16px" }'
						class="iconfont icon-iconfontzan"></i>
					<span :style='{ "color": "#fff", "margin": "0 3px", "fontSize": "16px" }'>踩一下({{ detail.crazilynum
					}})</span>
				</div>
				<div :style='{ "padding": "0", "margin": "0 2px", "alignItems": "center", "borderRadius": "8px", "background": "#FE6917", "display": "flex", "width": "100%", "justifyContent": "center", "height": "50px" }'
					v-if="isThumbsupnum" class="zan" @click="cancelThumbsupOrCrazily(21)">
					<i :style='{ "color": "#fff", "margin": "0 5px 0 0", "fontSize": "16px" }'
						class="iconfont icon-dianzan"></i>
					<span :style='{ "color": "#fff", "margin": "0 3px", "fontSize": "16px" }'>取消赞({{ detail.thumbsupnum
					}})</span>
				</div>
				<div :style='{ "padding": "0", "margin": "0 2px", "alignItems": "center", "borderRadius": "8px", "background": "#FE6917", "display": "flex", "width": "100%", "justifyContent": "center", "height": "50px" }'
					v-if="isCrazilynum" class="cai" @click="cancelThumbsupOrCrazily(22)">
					<i :style='{ "color": "#fff", "margin": "0 5px 0 0", "fontSize": "16px" }'
						class="iconfont icon-iconfontzan"></i>
					<span :style='{ "color": "#fff", "margin": "0 3px", "fontSize": "16px" }'>取消踩({{ detail.crazilynum
					}})</span>
				</div>
			</div>




			<el-tabs class="detail"
				:style='{ "border": "0", "width": "100%", "boxShadow": "none", "margin": "20px 0", "background": "#F7F5F7", "order": "4" }'
				v-model="activeName" type="border-card">
				<el-tab-pane label="详情介绍" name="first">
					<div v-html="detail.xiangqingjieshao"></div>
				</el-tab-pane>
				<el-tab-pane label="评论" name="second">
					<el-form class="add comment"
						:style='{ "boxShadow": "none", "padding": "15px", "margin": "0 0 20px" }' :model="form"
						:rules="rules" ref="form">
						<el-form-item class="item" :style='{ "width": "100%", "display": "flex", "height": "auto" }'
							label="评论" prop="content">
							<editor
								:style='{ "border": "1px solid #ddd", "minHeight": "250px", "boxShadow": "none", "color": "#333", "borderRadius": "4px", "background": "#fff", "width": "80%", "lineHeight": "32px", "fontSize": "14px" }'
								v-model="form.content" class="editor" action="file/upload">
							</editor>
						</el-form-item>
						<el-form-item class="btn"
							:style='{ "width": "100%", "padding": "0 0 0 80px", "margin": "10px 0 0", "height": "auto" }'>
							<el-button
								:style='{ "border": "0", "cursor": "pointer", "padding": "0", "margin": "0 20px 0 0", "outline": "none", "color": "rgba(255, 255, 255, 1)", "borderRadius": "4px", "background": "#FE6917", "width": "128px", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
								type="primary" @click="submitForm('form')">立即提交</el-button>
							<el-button
								:style='{ "border": "0", "cursor": "pointer", "padding": "0", "margin": "0 20px 0 0", "outline": "none", "color": "rgba(255, 255, 255, 1)", "borderRadius": "4px", "background": "#9E9E9E", "width": "128px", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
								@click="resetForm('form')">重置</el-button>
						</el-form-item>
					</el-form>

					<div v-if="infoList.length" :style='{ "boxShadow": "none", "padding": "0" }' class="comment">
						<div :style='{ "padding": "15px", "margin": "0 0 20px", "borderColor": "#999", "alignItems": "center", "borderWidth": "0", "background": "#fff", "width": "100%", "borderStyle": "solid", "height": "auto" }'
							v-for="item in infoList" :key="item.id" @mouseenter="discussEnter(item.id)"
							@mouseleave="discussLeave">
							<div class="user"
								:style='{ "width": "100%", "alignItems": "center", "display": "flex", "height": "auto" }'>
								<el-image v-if="item.avatarurl"
									:style='{ "width": "40px", "margin": "0 10px 0 0", "borderRadius": "100%", "objectFit": "cover", "height": "40px" }'
									:size="50" :src="baseUrl + item.avatarurl"></el-image>
								<el-image v-if="!item.avatarurl"
									:style='{ "width": "40px", "margin": "0 10px 0 0", "borderRadius": "100%", "objectFit": "cover", "height": "40px" }'
									:size="50" :src="require('@/assets/touxiang.png')"></el-image>
								<div :style='{ "color": "#333", "fontSize": "16px" }' class="name">{{ item.nickname }}
								</div>
							</div>
							<div :style='{ "padding": "8px", "boxShadow": "none", "margin": "10px 0px 0px", "color": "#333", "borderRadius": "4px", "background": "none", "wordWrap": "break-word", "lineHeight": "30px", "fontSize": "14px" }'
								class="content-block-ask">
								<div v-html="item.content"></div>
								<div class="btn"
									:style='{ "width": "100%", "margin": "8px 0 0 0", "alignItems": "center", "justifyContent": "flex-end", "display": "flex", "height": "30px" }'>
									<!-- <el-button :style='{"border":"0","cursor":"pointer","padding":"0 20px","margin":"0 10px","outline":"none","color":"rgba(255, 255, 255, 1)","borderRadius":"30px","background":"#FE6917","width":"auto","lineHeight":"30px","fontSize":"14px","height":"30px"}'>回复</el-button> -->
									<el-button v-if="showIndex == item.id && userid == item.userid"
										@click="discussDel(item.id)"
										:style='{ "border": "0", "cursor": "pointer", "padding": "0 20px", "margin": "0 10px", "outline": "none", "color": "rgba(255, 255, 255, 1)", "borderRadius": "30px", "background": "#9E9E9E", "width": "auto", "lineHeight": "30px", "fontSize": "14px", "height": "30px" }'>删除</el-button>
								</div>
							</div>
							<div :style='{ "padding": "8px", "boxShadow": "none", "margin": "10px 0px 0px", "color": "#333", "borderRadius": "4px", "background": "none", "wordWrap": "break-word", "lineHeight": "30px", "fontSize": "14px" }'
								class="content-block-reply" v-if="item.reply">
								回复：<span v-html="item.reply"></span>
							</div>
						</div>
					</div>

					<el-pagination background id="pagination" class="pagination" :pager-count="7" :page-size="pageSize"
						:page-sizes="pageSizes" prev-text="<" next-text=">" :hide-on-single-page="false"
						:layout='["prev", "pager", "next"].join()' :total="total"
						:style='{ "padding": "0", "margin": "10px auto", "whiteSpace": "nowrap", "color": "#333", "textAlign": "center", "width": "1200px", "fontWeight": "500" }'
						@current-change="curChange" @prev-click="prevClick" @next-click="nextClick"></el-pagination>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div class="share_view"
			:style='{ "boxShadow": "0 1px 6px rgba(53, 84, 164, .3)", "borderRadius": "0 10px 10px 0", "left": "0", "bottom": "20%", "background": "#fff", "width": "50px", "position": "fixed", "zIndex": "11" }'>
		</div>
	</div>
</template>

<script>
import CountDown from '@/components/CountDown';
import axios from 'axios'
import Swiper from "swiper";

export default {
	//数据集合
	data() {
		return {
			tablename: 'xueshengyundongxiangmu',
			baseUrl: '',
			breadcrumbItem: [
				{
					name: '学生活动项目'
				}
			],
			title: '',
			detailBanner: [],
			userid: localStorage.getItem('frontUserid'),
			id: 0,
			detail: {},
			activeName: 'second',
			form: {
				content: '',
				userid: localStorage.getItem('frontUserid'),
				nickname: localStorage.getItem('username'),
				avatarurl: '',
			},
			showIndex: -1,
			infoList: [],
			rules: {
				content: [
					{ required: true, message: '请输入内容', trigger: 'blur' }
				],
			},
			total: 1,
			pageSize: 5,
			pageSizes: [10, 20, 30, 50],
			totalPage: 1,
			storeupParams: {
				name: '',
				picture: '',
				refid: 0,
				tablename: 'xueshengyundongxiangmu',
				userid: localStorage.getItem('frontUserid')
			},
			isStoreup: false,
			storeupInfo: {},
			isCrazilynum: false,
			isThumbsupnum: false,
			thumbsupOrCrazilyInfo: {},
			buynumber: 1,
			centerType: false,
			shareUrl: location.href,
			isBaoming: false,
			xiangmuid: 0,
			userid: 0
		}
	},
	created() {
		if (this.$route.query.centerType) {
			this.centerType = true
		}

		this.init();
	},
	mounted() {
	},
	//方法集合
	methods: {
		init() {
			this.id = this.$route.query.id
			this.baseUrl = this.$config.baseUrl;
			this.userid = localStorage.getItem('frontUserid');
			this.$http.get(this.tablename + '/detail/' + this.id, {}).then(res => {
				if (res.data.code == 0) {
					this.detail = res.data.data;
					this.title = this.detail.yundongmingcheng;
					this.detailBanner = this.detail.tupian ? this.detail.tupian.split(",") : [];
					this.$forceUpdate();

					this.getDiscussList(1);
					if (localStorage.getItem('frontToken')) {
						this.getStoreupStatus();
						this.getThumbsupOrCrazilyStatus();
					}
				}
			});
			this.queryCount(this.id, this.userid);

		},
		async onAcross(acrossTable, crossOptAudit, crossOptPay, statusColumnName, tips, statusColumnValue, type = 1) {
			localStorage.setItem('crossTable', `xueshengyundongxiangmu`);
			localStorage.setItem('crossObj', JSON.stringify(this.detail));
			localStorage.setItem('statusColumnName', statusColumnName);
			localStorage.setItem('statusColumnValue', statusColumnValue);
			localStorage.setItem('tips', tips);
			if (statusColumnName != '' && !statusColumnName.startsWith("[")) {
				var obj = JSON.parse(localStorage.getItem('crossObj'));
				for (var o in obj) {
					if (o == statusColumnName && obj[o] == statusColumnValue) {
						this.$message({
							type: 'error',
							message: tips,
							duration: 1500
						});
						return
					}
				}
			}
			this.$router.push({ path: '/index/' + acrossTable + 'Add', query: { type: 'cross' } });
		},
		storeup(type) {
			if (type == 1 && !this.isStoreup) {
				this.storeupParams.name = this.title;
				this.storeupParams.picture = this.detailBanner[0];
				this.storeupParams.refid = this.detail.id;
				this.storeupParams.type = type;
				this.$http.post('storeup/add', this.storeupParams).then(res => {
					if (res.data.code == 0) {
						this.isStoreup = true;
						this.detail.storeupnum++
						this.$http.post('xueshengyundongxiangmu/update', this.detail).then(res => { });
						this.$message({
							type: 'success',
							message: '收藏成功!',
							duration: 1500,
						});
					}
				});
			}
			if (type == -1 && this.isStoreup) {
				this.$http.get('storeup/list', { params: { page: 1, limit: 1, type: 1, refid: this.detail.id, tablename: 'xueshengyundongxiangmu', userid: localStorage.getItem('frontUserid') } }).then(res => {
					if (res.data.code == 0 && res.data.data.list.length > 0) {
						this.isStoreup = true;
						this.storeupInfo = res.data.data.list[0];
						let delIds = new Array();
						delIds.push(this.storeupInfo.id);
						this.$http.post('storeup/delete', delIds).then(res => {
							if (res.data.code == 0) {
								this.isStoreup = false;
								this.detail.storeupnum--
								this.$http.post('xueshengyundongxiangmu/update', this.detail).then(res => { });
								this.$message({
									type: 'success',
									message: '取消成功!',
									duration: 1500,
								});
							}
						});
					}
				});
			}
		},
		getStoreupStatus() {
			if (localStorage.getItem("frontToken")) {
				this.$http.get('storeup/list', { params: { page: 1, limit: 1, type: 1, refid: this.detail.id, tablename: 'xueshengyundongxiangmu', userid: localStorage.getItem('frontUserid') } }).then(res => {
					if (res.data.code == 0 && res.data.data.list.length > 0) {
						this.isStoreup = true;
						this.storeupInfo = res.data.data.list[0];
					}
				});
			}
		},
		thumbsupOrCrazily(type) {
			this.storeupParams.name = this.title;
			this.storeupParams.picture = this.detailBanner[0];
			this.storeupParams.refid = this.detail.id;
			this.storeupParams.type = type;
			this.$http.post('storeup/add', this.storeupParams).then(res => {
				if (res.data.code == 0) {
					this.getThumbsupOrCrazilyStatus();
					this.$message({
						type: 'success',
						message: '操作成功!',
						duration: 1500,
					});
				}
			});

			if (type == 21) this.detail.thumbsupnum = Number(this.detail.thumbsupnum) + 1;
			if (type == 22) this.detail.crazilynum = Number(this.detail.crazilynum) + 1;
			this.$http.post('xueshengyundongxiangmu/update', this.detail).then(res => { });
		},
		cancelThumbsupOrCrazily(type) {
			let delIds = new Array();
			delIds.push(this.thumbsupOrCrazilyInfo.id);
			this.$http.post('storeup/delete', delIds).then(res => {
				if (res.data.code == 0) {
					this.isThumbsupnum = false;
					this.isCrazilynum = false;
					this.$message({
						type: 'success',
						message: '取消成功!',
						duration: 1500,
					});
				}
			});

			if (type == 21) this.detail.thumbsupnum -= 1;
			if (type == 22) this.detail.crazilynum -= 1;
			this.$http.post('xueshengyundongxiangmu/update', this.detail).then(res => { });
		},
		getThumbsupOrCrazilyStatus() {
			if (localStorage.getItem("frontToken")) {
				this.$http.get('storeup/list', { params: { page: 1, limit: 1, type: 21, refid: this.detail.id, tablename: 'xueshengyundongxiangmu', userid: localStorage.getItem('frontUserid') } }).then(res => {
					if (res.data.code == 0 && res.data.data.list.length > 0) {
						this.isThumbsupnum = true;
						this.thumbsupOrCrazilyInfo = res.data.data.list[0];
					}
				});

				this.$http.get('storeup/list', { params: { page: 1, limit: 1, type: 22, refid: this.detail.id, tablename: 'xueshengyundongxiangmu', userid: localStorage.getItem('frontUserid') } }).then(res => {
					if (res.data.code == 0 && res.data.data.list.length > 0) {
						this.isCrazilynum = true;
						this.thumbsupOrCrazilyInfo = res.data.data.list[0];
					}
				});
			}
		},
		curChange(page) {
			this.getDiscussList(page);
		},
		prevClick(page) {
			this.getDiscussList(page);
		},
		nextClick(page) {
			this.getDiscussList(page);
		},
		// 返回按钮
		backClick() {
			history.back()
		},
		// 下载
		download(file) {
			if (!file) {
				this.$message({
					type: 'error',
					message: '文件不存在',
					duration: 1500,
				});
				return;
			}
			let arr = file.replace(new RegExp('upload/', "g"), "")
			axios.get(this.baseUrl + '/file/download?fileName=' + arr, {
				headers: {
					token: localStorage.getItem("frontToken")
				},
				responseType: "blob"
			}).then(({
				data
			}) => {
				const binaryData = [];
				binaryData.push(data);
				const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
					type: 'application/pdf;chartset=UTF-8'
				}))
				const a = document.createElement('a')
				a.href = objectUrl
				a.download = arr
				// a.click()
				// 下面这个写法兼容火狐
				a.dispatchEvent(new MouseEvent('click', {
					bubbles: true,
					cancelable: true,
					view: window
				}))
				window.URL.revokeObjectURL(data)
			}, err => {
				axios.get((location.href.split(this.$config.name).length > 1 ? location.href.split(this.$config.name)[0] : '') + this.$config.name + '/file/download?fileName=' + arr, {
					headers: {
						token: localStorage.getItem("frontToken")
					},
					responseType: "blob"
				}).then(({
					data
				}) => {
					const binaryData = [];
					binaryData.push(data);
					const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
						type: 'application/pdf;chartset=UTF-8'
					}))
					const a = document.createElement('a')
					a.href = objectUrl
					a.download = arr
					// a.click()
					// 下面这个写法兼容火狐
					a.dispatchEvent(new MouseEvent('click', {
						bubbles: true,
						cancelable: true,
						view: window
					}))
					window.URL.revokeObjectURL(data)
				})
			})
		},
		getDiscussList(page) {
			this.$http.get('discussxueshengyundongxiangmu/list', { params: { page, limit: this.pageSize, refid: this.detail.id } }).then(res => {
				if (res.data.code == 0) {
					this.infoList = res.data.data.list;
					this.total = res.data.data.total;
					this.pageSize = res.data.data.pageSize; this.pageSizes = [this.pageSize, this.pageSize * 2, this.pageSize * 3, this.pageSize * 5];
					this.totalPage = res.data.data.totalPage;
				}
			});
		},
		discussEnter(index) {
			this.showIndex = index
		},
		discussLeave() {
			this.showIndex = -1
		},
		discussDel(id) {
			this.$confirm('是否删除此评论？')
				.then(_ => {
					this.$http.post('discussxueshengyundongxiangmu/delete', [id]).then(res => {
						if (res.data && res.data.code == 0) {
							this.addDiscussNum(1)
							this.$message({
								type: 'success',
								message: '删除成功!',
								duration: 1500,
								onClose: () => {
									this.getDiscussList(1);
								}
							});
						}
					})
				}).catch(_ => { });
		},
		submitForm(formName) {
			let sensitiveWords = "";
			let sensitiveWordsArr = [];
			if (sensitiveWords) {
				sensitiveWordsArr = sensitiveWords.split(",");
			}
			for (var i = 0; i < sensitiveWordsArr.length; i++) {
				//全局替换
				var reg = new RegExp(sensitiveWordsArr[i], "g");
				//判断内容中是否包括敏感词
				if (this.form.content.indexOf(sensitiveWordsArr[i]) > -1) {
					// 将敏感词替换为 **
					this.form.content = this.form.content.replace(reg, "**");
				}
			}
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.form.refid = this.detail.id;
					this.form.avatarurl = localStorage.getItem('frontHeadportrait') ? localStorage.getItem('frontHeadportrait') : '';
					this.$http.post('discussxueshengyundongxiangmu/add', this.form).then(res => {
						if (res.data.code == 0) {
							this.form.content = '';
							this.addDiscussNum(2)
							this.getDiscussList(1);
							this.$message({
								type: 'success',
								message: '评论成功!',
								duration: 1500,
							});
						}
					});
				} else {
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		addDiscussNum(type) {
			if (type == 2) {
				this.detail.discussnum++
			} else if (type == 1) {
				if (this.detail.discussnum != 0) {
					this.detail.discussnum--
				} else {
					this.detail.discussnum = 0
				}
			}
			this.$http.post('xueshengyundongxiangmu/update', this.detail).then(res => {

			})
		},


		// 权限判断
		btnAuth(tableName, key) {
			if (this.centerType) {
				return this.isBackAuth(tableName, key)
			} else {
				return this.isAuth(tableName, key)
			}
		},
		// 修改
		editClick() {
			this.$router.push(`/index/xueshengyundongxiangmuAdd?type=edit&&id=${this.detail.id}`);
		},
		// 删除
		delClick() {
			this.$confirm('是否删除此学生活动项目？')
				.then(_ => {
					this.$http.post('xueshengyundongxiangmu/delete', [this.detail.id]).then(res => {
						if (res.data.code == 0) {
							this.$message({
								type: 'success',
								message: '删除成功!',
								duration: 1500,
								onClose: () => {
									history.back()
								}
							});
						}
					});
				}).catch(_ => { });
		},
		// 获取用户报名信息
		queryCount(xiangmuid, userid) {
			this.$http.get(`xueshengbaomingxinxi/queryCount/${xiangmuid}/${userid}`).then(res => {
				if (res.data.data === true) {
					this.isBaoming = true;
				} else {
					this.isBaoming = false;
				}
			});
		},
		// 取消报名
		deleteBaoming() {
			this.$confirm('是否取消报名？')
				.then(_ => {
					this.$http.post(`xueshengbaomingxinxi/deleteBaoming/${this.id}/${this.userid}`).then(res => {
						if (res.data.code == 0) {
							this.$message({
								type: 'success',
								message: '取消成功!',
								duration: 1500,
								onClose: () => {
									history.back()
								}
							});
						}
					});
				}).catch(_ => { });
		}
	},
	components: {
		CountDown
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.editor /deep/ .avatar-uploader {
	height: 0;
	line-height: 0;
}

.detail-preview {

	.attr {
		.el-carousel /deep/ .el-carousel__indicator button {
			width: 0;
			height: 0;
			display: none;
		}

		.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),
		.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
			border-color: none;
		}
	}

	.detail {
		& /deep/ .el-tabs__header .el-tabs__nav-wrap {
			margin-bottom: 0;
		}

		& .add .el-textarea {
			width: auto;
		}
	}
}

.attr .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--left {
	width: 36px;
	font-size: 12px;
	height: 36px;
}

.attr .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--left:hover {
	background: #FE6917;
}

.attr .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--right {
	width: 36px;
	font-size: 12px;
	height: 36px;
}

.attr .el-carousel /deep/ .el-carousel__container .el-carousel__arrow--right:hover {
	background: #FE6917;
}

.attr .el-carousel /deep/ .el-carousel__indicators {
	padding: 0;
	margin: 0;
	z-index: 2;
	position: absolute;
	list-style: none;
}

.attr .el-carousel /deep/ .el-carousel__indicators li {
	padding: 0;
	margin: 0 4px;
	background: #fff;
	display: inline-block;
	width: 12px;
	opacity: 0.4;
	transition: 0.3s;
	height: 12px;
}

.attr .el-carousel /deep/ .el-carousel__indicators li:hover {
	padding: 0;
	margin: 0 4px;
	background: #FE6917;
	display: inline-block;
	width: 24px;
	opacity: 0.7;
	height: 12px;
}

.attr .el-carousel /deep/ .el-carousel__indicators li.is-active {
	padding: 0;
	margin: 0 4px;
	background: #FE6917;
	display: inline-block;
	width: 24px;
	opacity: 1;
	height: 12px;
}

.attr .el-input-number /deep/ .el-input-number__decrease {
	cursor: pointer;
	z-index: 1;
	display: flex;
	border-color: #DCDFE6;
	border-radius: 4px 0 0 4px;
	top: 1px;
	left: 1px;
	background: #000;
	width: 40px;
	justify-content: center;
	border-width: 0 1px 0 0;
	align-items: center;
	position: absolute;
	border-style: solid;
	text-align: center;
	height: 38px;
}

.attr .el-input-number /deep/ .el-input-number__decrease i {
	color: #fff;
	font-size: 14px;
}

.attr .el-input-number /deep/ .el-input-number__increase {
	cursor: pointer;
	z-index: 1;
	display: flex;
	border-color: #DCDFE6;
	right: 1px;
	border-radius: 0 4px 4px 0;
	top: 1px;
	background: #000;
	width: 40px;
	justify-content: center;
	border-width: 0 0 0 1px;
	align-items: center;
	position: absolute;
	border-style: solid;
	text-align: center;
	height: 38px;
}

.attr .el-input-number /deep/ .el-input-number__increase i {
	color: #fff;
	font-size: 14px;
}

.attr .el-input-number /deep/ .el-input .el-input__inner {
	border: 1px solid #000;
	border-radius: 4px;
	padding: 0 40px;
	outline: none;
	color: #000;
	background: #FFF;
	display: inline-block;
	width: 100%;
	font-size: 15px;
	line-height: 40px;
	text-align: center;
	height: 40px;
}

.detail-preview .detail.el-tabs /deep/ .el-tabs__header {
	margin: 0;
	background: none;
	border-color: #FE6917;
	border-width: 20px 0 0;
	border-style: solid;
}

.detail-preview .detail.el-tabs /deep/ .el-tabs__header .el-tabs__item {
	border: 0;
	padding: 0 20px;
	margin: 0 10px;
	color: #fff;
	font-weight: 500;
	display: inline-block;
	font-size: 14px;
	line-height: 40px;
	border-radius: 0 0 20px 20px;
	background: #9E9E9E;
	position: relative;
	list-style: none;
	height: 40px;
}

.detail-preview .detail.el-tabs /deep/ .el-tabs__header .el-tabs__item:hover {
	border: 0;
	border-radius: 0 0 20px 20px;
	margin: 0 10px;
	color: #fff;
	background: #3554A4;
}

.detail-preview .detail.el-tabs /deep/ .el-tabs__header .el-tabs__item.is-active {
	border: 0;
	border-radius: 0 0 20px 20px;
	margin: 0 10px;
	color: #fff;
	background: #3554A4;
}

.detail-preview .detail.el-tabs /deep/ .el-tabs__content {
	padding: 15px;
}

.detail-preview .detail.el-tabs .add /deep/ .el-form-item__label {
	padding: 0 10px 0 0;
	color: #666;
	width: 80px;
	font-size: 14px;
	line-height: 40px;
	text-align: right;
}

.detail-preview .detail.el-tabs .add /deep/ .el-textarea__inner {}

.breadcrumb-preview .el-breadcrumb /deep/ .el-breadcrumb__separator {
	margin: 0 9px;
	color: #ccc;
	font-weight: 500;
}

.breadcrumb-preview .el-breadcrumb .item1 /deep/ .el-breadcrumb__inner a {
	color: #000;
	display: inline-block;
}

.breadcrumb-preview .el-breadcrumb .item2 /deep/ .el-breadcrumb__inner a {
	color: #000;
	display: inline-block;
}

.breadcrumb-preview .el-breadcrumb .item3 /deep/ .el-breadcrumb__inner a {
	color: #000;
	display: inline-block;
}

#pagination.el-pagination /deep/ .el-pagination__total {
	margin: 0 10px 0 0;
	color: #666;
	font-weight: 400;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .btn-prev {
	border: none;
	border-radius: 30px;
	padding: 0;
	margin: 0 5px;
	color: #fff;
	background: #3554A4;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	min-width: 35px;
	height: 28px;
}

#pagination.el-pagination /deep/ .btn-next {
	border: none;
	border-radius: 30px;
	padding: 0;
	margin: 0 5px;
	color: #fff;
	background: #3554A4;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	min-width: 35px;
	height: 28px;
}

#pagination.el-pagination /deep/ .btn-prev:disabled {
	border: none;
	cursor: not-allowed;
	border-radius: 30px;
	padding: 0;
	margin: 0 5px;
	color: #C0C4CC;
	background: #666;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .btn-next:disabled {
	border: none;
	cursor: not-allowed;
	border-radius: 30px;
	padding: 0;
	margin: 0 5px;
	color: #C0C4CC;
	background: #666;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pager {
	padding: 0;
	margin: 0;
	display: inline-block;
	vertical-align: top;
}

#pagination.el-pagination /deep/ .el-pager .number {
	cursor: pointer;
	padding: 0 4px;
	margin: 0 5px;
	color: #000;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	border-radius: 30px;
	background: #CBCBCB;
	text-align: center;
	min-width: 30px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pager .number:hover {
	cursor: pointer;
	padding: 0 4px;
	margin: 0 5px;
	color: #fff;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	border-radius: 30px;
	background: #FE6917;
	text-align: center;
	min-width: 30px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pager .number.active {
	cursor: default;
	padding: 0 4px;
	margin: 0 5px;
	color: #FFF;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	border-radius: 30px;
	background: #FE6917;
	text-align: center;
	min-width: 30px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__sizes {
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__sizes .el-input {
	margin: 0 5px;
	width: 100px;
	position: relative;
}

#pagination.el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
	border: 1px solid #DCDFE6;
	cursor: pointer;
	padding: 0 25px 0 8px;
	color: #606266;
	display: inline-block;
	font-size: 13px;
	line-height: 28px;
	border-radius: 3px;
	outline: 0;
	background: #FFF;
	width: 100%;
	text-align: center;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
	top: 0;
	position: absolute;
	right: 0;
	height: 100%;
}

#pagination.el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
	cursor: pointer;
	color: #C0C4CC;
	width: 25px;
	font-size: 14px;
	line-height: 28px;
	text-align: center;
}

#pagination.el-pagination /deep/ .el-pagination__jump {
	margin: 0 0 0 24px;
	color: #606266;
	display: inline-block;
	vertical-align: top;
	font-size: 13px;
	line-height: 28px;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__jump .el-input {
	border-radius: 3px;
	padding: 0 2px;
	margin: 0 2px;
	display: inline-block;
	width: 50px;
	font-size: 14px;
	line-height: 18px;
	position: relative;
	text-align: center;
	height: 28px;
}

#pagination.el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
	border: 1px solid #DCDFE6;
	cursor: pointer;
	padding: 0 3px;
	color: #606266;
	display: inline-block;
	font-size: 14px;
	line-height: 28px;
	border-radius: 3px;
	outline: 0;
	background: #FFF;
	width: 100%;
	text-align: center;
	height: 28px;
}

.share_view {
	position: fixed;
	right: 0;
	bottom: 20%;
	background: #fff;
	box-shadow: 0 4px 6px rgba(0, 0, 0, .1);

	.share {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #eee;
		cursor: pointer;
	}

	.share:last-of-type {
		border: none;
	}
}


.detail-preview .el-rate /deep/ .el-rate__item {
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	font-size: 0;
	position: relative;
}

.detail-preview .el-rate /deep/ .el-rate__item .el-rate__icon {
	margin: 0 3px;
	display: block;
	font-size: 18px;
	position: relative;
	transition: .3s;
}
</style>
